<template>
  <view>
    <view style="margin: 20upx;background-color: #fff;padding: 20upx;border-radius: 20upx;">
      <view style="width: 100%;text-align: center;">
        <view style="font-size: 48upx;font-weight: 600;color: #EC2D16;">
          {{money}}
        </view>
        <view style="font-size: 24upx;">
          可转让{{typeText}}
        </view>
      </view>
      <view v-if="type != 'zyxfq'"
        style="font-size: 24upx;height: 80upx;line-height: 80upx;margin-top: 40upx;border-bottom: 1upx solid #dddddd;">
        <text>对方手机号</text><input type="number" maxlength="11" @input="phoneInput"
          style="text-align: center; border: none;display: inline-block;width: 298upx;height: 70upx;vertical-align: middle;margin-left: 50upx;" /><text
          style="margin-left: 50upx;"></text>
        <!-- @blur='Idblur' -->
      </view>
      <view
        style="font-size: 24upx;height: 80upx;line-height: 80upx;margin-top: 40upx;border-bottom: 1upx solid #dddddd;">
        <text>转让{{typeText}}</text><input type="number"
          style="text-align: center; border: none;display: inline-block;width: 190upx;height: 70upx;vertical-align: middle;margin-left: 120upx;"
          @input="numInput" /><text style="margin-left: 50upx;"></text>
      </view>
    </view>
    <view v-if="otherid" style="text-align: center;">
      对方ID:{{otherid}}
    </view>
    <view v-if="otherid" style="text-align: center;">
      对方昵称:{{nickname}}
    </view>

    <view class="btn" style="margin-top: 20upx;width: 80%;margin-left: 10%;">
      <button class="logout" @click="open()"
        style="font-size: 34upx;height: 80upx;line-height: 80upx;border-radius: 40upx;">确认转让</button>
    </view>
    <number-jpan :length="6" @closeChange="closeChange($event)" ref="numberPad"></number-jpan>
  </view>
</template>

<script>
  import * as API_Members from '@/api/members.js'
  import numberJpan from "@/components/numberJpan/numberJpan.vue";
  export default {
    data() {
      return {
        res: [],
        num: '',
        money: '',
        openid: '',
        mobile: '',
        phone: '',
        paypass: '',
        otherid: '',
        nickname: '',

        submitUrl: '',
        numUrl: '',
        typeText: '百汇券',
        type: '',
      };
    },
    components: {
      numberJpan
    },
    onShow: function() {
      this.setajax()
    },
    methods: {
      numInput(e) {
        this.num = e.target.value
      },
      phoneInput(e) {
        this.mobile = e.target.value
      },
      jump(e) {
        uni.navigateTo({
          url: e.currentTarget.dataset.src
        });
      },
      // 判断是否有支付密码
      async checkPwd() {
        uni.request({
          url: 'http://ymjkt.mygodmall.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.check_pwd&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            console.log(res)
            if (res.data.error == 1) {
              this.$u.toast(res.data.message)
              setTimeout(() => {
                this.$u.route('/pages/member/paypwd/paypwd')
              }, 1200)
            } else {
              // this.showTijiao = true
            }
          },
          fail: () => {},
          complete: () => {}
        });
      },

      open() {
        // this.checkPwd()
        this.$refs.numberPad.open() //打开数字输入框
        //this.$refs.numberPad.close()//关闭数字输入框
      },
      Idblur(e) {
        console.log(e)
        var data1 = {
          'mobile': this.mobile,
          openid: this.openid
        }
        uni.request({
          url: 'http://ymjkt.mygodmall.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.hyhz.hz_member&app=1',
          method: 'POST',
          data: data1,
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            console.log(res)
            // this.$u.toast(res.data.message)
            this.otherid = res.data.otherid
            this.nickname = res.data.nickname

          },
          fail: () => {},
          complete: () => {}
        });
      },
      closeChange(res) {
        console.log({
          res
        })
        this.paypass = res
        this.submit()
      },
      async setajax() {
        let res = await API_Members.memberInfo()
        console.log(res)
        this.money = res.delivery_amount
      },
      async submit() {
        var data = {
          'mobile': this.mobile,
          'amount': this.num,
          'pwd': this.paypass,
        }
        let res = await API_Members.transferDelivery(data)
        this.$u.toast('转让成功！')
        setTimeout(() => {
          uni.switchTab({ //跳转到我的页
            url: '/pages/tabs/mine/mine'
          })
        }, 1200)
      }
    }
  }
</script>

<style>
  page {
    background-color: #F3F3F3;
  }

  .btn {
    padding: 20upx 0;
  }

  .btn button {
    margin: 20upx 0;
    font-size: 28upx;
  }

  .btn .logout {
    border-color: #175e3c;
    background: #EC2D16;
    color: #fff;
  }
</style>
